<!-- 用户登录 UserLogin.vue -->
<template>
  <div>
    <el-form
      :model="loginForm"
      ref="loginForm"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="用户名：" prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密 码：" prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin">登录</el-button>
        <el-button type="primary" @click="toRegister" style="margin-left: 20px"
          >注册</el-button
        >
        <el-link
          type="primary"
          style="margin-left: 20px"
          @click="forgotPassword"
          >忘记密码</el-link
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["userrole"],
  watch: {
    userrole: {
      deep: true,
      handler(newValue, oldValue) {
        if (newValue == 1) {
          this.loginForm = { username: "wufeng", password: "123456" };
        } else if (newValue == 2) {
          this.loginForm = { username: "makima", password: "bad" };
        } else {
          this.loginForm = { username: "admin", password: "admin" };
        }
      },
    },
  },
  data() {
    return {
      loginForm: {
        username: "wufeng",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    //登录账号
    handleLogin() {
      //获取角色
      console.log(this.userrole);
      this.verifyLogin();
    },
    verifyLogin() {
      this.$request.postHttp({
        url: "/user/login",
        data: {
          username: this.loginForm.username,
          password: this.loginForm.password,
          userrole: this.userrole,
        },
        success: (data) => {
          console.log("Success:", data);
          // 执行成功时的操作
          if (data.login) {
            this.$message({
              message: "登录成功！",
              type: "success",
              offset: 400,
            });
            //修改userId,userName,avatar
            let user = data.user;
            this.updateUserInfo(user.userid, user.username, user.avatar);

            localStorage.setItem("userrole", this.userrole);

            //将token存在缓存中
            localStorage.setItem("token", data.token);

            // 编程式导航到路由
            if (this.userrole == 3) {
              this.$router.replace("/admin/usermanage");
              return;
            }
            this.$router.replace("/knowledge");
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              offset: 200,
            });
          }
        },
        error: (error) => {
          console.error("Error:", error);
          // 执行失败时的操作
        },
      });
    },
    //修改userId,userName,avatar
    updateUserInfo(userId, userName, avatar) {
      localStorage.setItem("userId", userId);
      localStorage.setItem("userName", userName);
      localStorage.setItem("avatar", avatar);
    },
    //进入注册页面
    toRegister() {
      this.$router.replace("/register");
    },
    //忘记密码
    forgotPassword() {
      this.$emit("forgotPassword");
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要自行修改 */
</style>
